<template>
	<view class="container">
		<u-row class="user-info">
			<u-icon class="refresh" name="reload" color="#fff" size="20"></u-icon>
			<image src="/static/images/homePage/jkzs-bg.png"></image>
			<view>
				<u-row>
					张元英
				</u-row>
				<u-row style="margin-top: 6px;">
					<u-col :span="6">
						<u-row>
							<u--image style="margin-right: 3px;" src="/static/images/my/qd.png" width="13px" height="13px"></u--image>
							已连接
						</u-row>
					</u-col>
					<u-col :span="6">
						<u-row>
							<u--image style="margin-right: 3px;" src="/static/images/my/dl.png" width="13px" height="13px"></u--image>
							93%
						</u-row>
					</u-col>
				</u-row>
			</view>
			<image style="width: 152px;height: 152px;position: absolute;bottom:0;right: -20px;transform: translateY(70%);" src="/static/images/homePage/jkzs-bg.png"></image>
		</u-row>
		<view class="jkzs-border">
			<view class="jkzs">
				<u-row>
					中医健康指数
				</u-row>
				<u-row>
					<u-col :span="6">阴指数：<span>80</span></u-col>
					<u-col :span="6">阳指数：<span>62</span></u-col>
				</u-row>
				<u-row class="tip">
					满分各100，数值越低表示越虚。
				</u-row>

			</view>
		</view>
		<view class="card" v-for="i in cardList" :key="i.title" @click="skipPage(i.page)">
			<u-row>
				<u-col :span="6">
					<u-row>
						<image style="width: 18px;height: 18px;margin-right: 8px;" :src="i.icon"></image>
						{{ i.title }}
					</u-row>
				</u-col>
				<u-col class="sub-title" textAlign="right" :span="6">
					<u-row justify="flex-end">
						{{ i.subTitle }}
						<u-icon style="margin-left: 8px;" size="10" name="arrow-right" color=" #F3D2BA"></u-icon>
					</u-row>
				</u-col>
			</u-row>
		</view>
		<view class="card">
			<u-row>
				<u-col :span="4">
					<view class="heart-rate">
						<u-row>
							<image style="width: 18px;height: 18px;margin-right: 8px;" src="../../static/images/homePage/xl.png"></image>
							心率
						</u-row>
						<view class="number">
							93
							<span>bpm</span>
						</view>
					</view>
				</u-col>
				<u-col class="heart-rate-chart" textAlign="right" :span="6">
					<charts v-if="!loading" :option="option2" id="2" :height="58"></charts>
				</u-col>
				<image class="start-measure" :src="measure1 ? startMeasure : startMeasureIng" @click="handleMeasure(1)" alt=""></image>
			</u-row>
		</view>
		<u-row :gutter="10">
			<u-col :span="6">
				<view class="card">
					<u-row @click="skipPage('Sleep')">
						<u-col :span="8">
							<u-row>
								<image style="width: 18px;height: 18px;margin-right: 8px;" src="../../static/images/homePage/smzl.png"></image>
								睡眠质量
							</u-row>
						</u-col>
						<u-col :span="4" align="bottom">
							<u-icon style="margin-left: 8px;" size="10" name="arrow-right" color=" #F3D2BA"></u-icon>
						</u-col>
					</u-row>
					<view class="smzl-chart" style="height: 122px;padding: 15px 0px;">
						<charts v-if="!loading" :option="option1" id="1" :height="122"></charts>
					</view>
					<u-row>
						<u-col :span="6">
							<u-row style="font-size: 12px;font-weight: bold;">
								<image style="width: 14px;height: 14px;margin-right: 8px;" src="../../static/images/homePage/ws.png"></image>
								00:25
							</u-row>
						</u-col>
						<u-col :span="6">
							<u-row style="font-size: 12px;font-weight: bold;">
								<image style="width: 18px;height: 18px;margin-right: 8px;" src="../../static/images/homePage/bt.png"></image>
								07:25
							</u-row>
						</u-col>

					</u-row>
				</view>
			</u-col>
			<u-col :span="6">
				<view style="display: flex;flex-direction: column;">
					<view class="card" @click="skipPage('BloodOxygen')">
						<u-row>
							<u-col :span="8">
								<u-row>
									<image style="width: 18px;height: 18px;margin-right: 8px;" src="../../static/images/homePage/xy.png"></image>
									血氧
								</u-row>
							</u-col>
							<u-col :span="4" align="bottom">
								<u-icon style="margin-left: 8px;" size="10" name="arrow-right" color=" #F3D2BA"></u-icon>
							</u-col>
							<image class="start-measure" :src="measure2 ? startMeasure : startMeasureIng" alt="" @click.stop="handleMeasure(2)"></image>
						</u-row>

						<view class="number">
							93
							<span>%</span>
						</view>
					</view>
					<view class="card" @click="skipPage('PressureIndex')">
						<u-row>
							<u-col :span="8">
								<u-row>
									<image style="width: 18px;height: 18px;margin-right: 8px;" src="../../static/images/homePage/ylzs.png"></image>
									心里健康
								</u-row>
							</u-col>
							<u-col :span="4" align="bottom">
								<u-icon style="margin-left: 8px;" size="10" name="arrow-right" color=" #F3D2BA"></u-icon>
							</u-col>
						</u-row>
						<view class="number">
							86
							<span>分</span>
						</view>
						<image class="start-measure" :src="measure1 ? startMeasure : startMeasureIng" @click.stop="handleMeasure(1)"></image>
					</view>

				</view>

			</u-col>
		</u-row>
		<u-row :gutter="10">
			<u-col :span="6">
				<view class="card" @click="skipPage('Temperature')">
					<u-row>
						<u-col :span="8">
							<u-row>
								<image style="width: 18px;height: 18px;margin-right: 8px;" src="../../static/images/homePage/tw.png"></image>
								体温
							</u-row>
						</u-col>
						<u-col :span="4" align="bottom">
							<u-icon style="margin-left: 8px;" size="10" name="arrow-right" color=" #F3D2BA"></u-icon>
						</u-col>
					</u-row>

					<view class="number">
						35.5
						<span>℃</span>
					</view>
				</view>
			</u-col>
			<u-col :span="6">
				<view class="card">
					<u-row>
						<u-col :span="8">
							<u-row>
								<image style="width: 18px;height: 18px;margin-right: 8px;" src="../../static/images/homePage/yd.png"></image>
								运动
							</u-row>
						</u-col>
						<u-col :span="4" align="bottom" @click="skipPage('SportsRunning')">
							<u-icon style="margin-left: 8px;" size="10" name="arrow-right" color=" #F3D2BA"></u-icon>
						</u-col>
					</u-row>

					<view class="number">
						12654
						<span>步</span>
					</view>
				</view>
			</u-col>
		</u-row>
		<tab-bar :tabIndex="0"></tab-bar>
	</view>
</template>
<script>
	import {
		mapGetters
	} from "vuex"

	export default {
		data() {
			return {
				loading: true,
				mainText: '123',
				subText: '456',
				cardList: [{
					title: '中医问诊',
					icon: require("../../static/images/homePage/zywz.png"),
					subTitle: '预测疾病转归',
					page: 'TCMInquiry'
				}, {
					title: '成员健康',
					icon: require("../../static/images/homePage/cyjk.png"),
					subTitle: '群组共享健康数据',
					page: 'MemberHealth'
				}],
				startMeasure: require("../../static/images/homePage/startMeasure.png"),
				startMeasureIng: require("../../static/images/homePage/startMeasureIng.png"),
				measure1: true,
				measure2: true,
				measure3: true,
				option2: {
					xAxis: {
						type: 'category',
						data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
						axisLine: {
							show: false,
						},
						splitLine: {
							show: false,
						},
						axisTick: {
							show: false,
						},
						axisLabel: {
							show: false,
						},
					},
					yAxis: {
						type: 'value',
						max: 90,
						min: 30,
						splitLine: {
							show: false,
						},
						axisLine: {
							show: false,
						},
						axisTick: {
							show: false,
						},
						axisLabel: {
							show: false,
						},
					},
					series: [{
						data: [150, 230, 224, 218, 135, 147, 260],
						type: 'line',
						symbolSize: 0,
						lineStyle: {
							width: 1,
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [{
									offset: 0,
									color: '#02A166' // 0% 处的颜色
								}, {
									offset: 1,
									color: '#FFD8BB' // 100% 处的颜色
								}],
								global: false // 缺省为 false
							}
						},
					}]
				},
				option1: {
					title: {
						text: `{a|大} {b|小}`, // 使用富文本语法插入动态值
						left: 'center', // 水平居中
						top: 'center', // 垂直居中
						textStyle: {
							rich: {
								a: {
									color: "#FFD8BB",
									fontSize: 30,
								},
								b: {
									fontSize: 12,
									color: "#FFD8BB",
								}
							}
						}
					},
					tooltip: {
						show: false,
					},
					series: [{
						type: "pie",
						radius: ["80%", "100%"],
						itemStyle: {
							borderRadius: [50, 90]
						},
						label: {
							normal: {
								position: "center",
							},
						},
						hoverAnimation: false,
						data: [{
								value: 93,
								name: '得分',
								itemStyle: {
									normal: {
										color: {
											type: "linear",
											x: 0,
											y: 0,
											x2: 0,
											y2: 1,
											colorStops: [{
													offset: 0,
													color: "#F3D2BA ", // 0% 处的颜色
												},
												{
													offset: 0.5,
													color: "#5FB385", // 0% 处的颜色
												},
												{
													offset: 1,
													color: "#02A166", // 100% 处的颜色
												},
											],
											globalCoord: false, // 缺省为 false
										},

									},
								},
							},
							{
								value: 100 - 93,
								itemStyle: {
									color: '#292929'
								}
							}
						],
					}],
				},
			}
		},
		components: {},
		onReady() {
			uni.hideTabBar()
		},
		onShow() {
			this.loading = true
			setTimeout(() => {
				this.loading = false
			}, 200)
		},
		onLoad() {
			this.option1.title.text = '{a|97} {b|分}' // 使用富文本语法
			let heartRateData = []
			for (let i = 0; i < 70; i++) {
				heartRateData.push(Math.random() * (75 - 50) + 50);
			}
			this.option2.series[0].data = heartRateData
			this.option2.xAxis.data = heartRateData.map((_, index) => `T${index}`)
			// console.log(heartRateData, this.option2.xAxis.data)
			this.loading = false
		},
		methods: {
			handleMeasure(type) {
				if (type == 1) {
					this.measure1 = !this.measure1
				} else if (type == 2) {
					this.measure2 = !this.measure2
				} else if (type == 3) {
					this.measure3 = !this.measure3
				}
			},
			skipPage(page) {
				console.log(page)
				uni.navigateTo({
					url: `/pages/${page}/${page}`
				})
			}
		},
		computed: {
			...mapGetters(["userInfo"]),
		},
	}
</script>
<style lang="scss">
	.container {
		flex: 1;
		height: 100%;
		display: flex;
		flex-direction: column;
		padding: 44px 12px;
		box-sizing: border-box;

		background-image: url("../../static/images/homePage/bg.png");
		background-size: 100% auto;
		background-position: top;
		background-repeat: no-repeat;

		.user-info {
			font-weight: 800;
			font-size: 22px;
			letter-spacing: 1px;
			margin-bottom: 12px;
			margin-top: 20px;
			position: relative;

			.refresh {
				position: absolute;
				top: -10px;
				right: 0px;
			}

			image {
				width: 64px;
				height: 64px;
				margin-right: 20px;
			}

			.u-row {

				.u-col:last-child {
					color: #54D7A5;
					margin-left: 12px !important;
				}

				.u-col {
					image {
						width: 13px;
						height: 13px;
						margin-right: 3px;
					}

					height: 17px;
					font-size: 12px;
					color: #FFD8BB;
					line-height: 17px;
				}
			}
		}


		.heart-rate {
			display: flex;
			flex-direction: column;
		}

		.heart-rate-chart {
			width: 100%;
			height: 58px;
			background: #020202;
			border-radius: 6px;
		}

		.start-measure {
			position: absolute;
			right: 0;
			bottom: 0;
			top: 50%;
			transform: translateY(-50%);
			width: auto;
			height: 100px;
			width: 55px;
			cursor: pointer;
		}

		.card {
			width: 100%;
			background: #1B1B1B;
			border-radius: 12px;
			margin-bottom: 12px;
			padding: 17px;
			box-sizing: border-box;
			position: relative;

			.number {
				height: 36px;
				font-size: 30px;
				color: #FFD8BB;
				line-height: 36px;
				padding: 8px 3px;

				span {
					height: 20px;
					font-weight: 600;
					font-size: 14px;
					line-height: 20px;
					margin-left: 2px;
				}
			}

			::v-deep .u-icon {
				width: 20px;
				height: 20px;
				border-radius: 50%;
				justify-content: center;
				background: linear-gradient(180deg, #242820 0%, #171314 100%);
				border: 0px solid;
				border-image: linear-gradient(180deg, rgba(126, 116, 94, 1), rgba(24, 20, 21, 1)) 0 0;
			}

			.sub-title {
				font-size: 12px;
				color: rgba(255, 255, 255, 0.5);
				line-height: 17px;
				text-align: left;
			}
		}
	}

	.jkzs-border {
		border-radius: 12px;
		margin-bottom: 12px;
		overflow: hidden;
	}

	.jkzs {
		border: 1px solid;
		border-image: linear-gradient(225deg, rgba(112, 108, 99, 1), rgba(81, 69, 51, 1), rgba(255, 219, 180, 1), rgba(133, 113, 81, 1), rgba(90, 92, 80, 1)) 1 1;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		box-sizing: border-box;
		padding: 16px;
		width: 100%;
		height: 114px;
		background: #0B0F12;
		box-shadow: inset 0px 0px 12px 6px #2C281F;

		.u-row {
			width: calc(100% - 155px);

			.u-col {
				display: flex;
				flex-direction: row;
				font-size: 12px;
				color: #FFD8BB;
				line-height: 17px;

				span {
					font-weight: blod;
					font-size: 24px;
				}
			}

			.u-col:last-child {
				color: #54D7A5;
				margin-left: 12px !important;
			}
		}

		.tip {
			height: 14px;
			font-size: 10px;
			color: #666666;
			line-height: 14px;
		}

	}
</style>